<template>
  <div class="etjkjc">
    <p class="top">
      <span style="font-weight: 700; font-size: 16px; color: #000">{{ info.residentName }}</span>
      <span style="display: inline-block; margin: 0 20px"
        >证件号：{{ info.idNo }}</span
      >
      <span>填表人：{{ info.createUserId }}</span>
    </p>
    <div class="box">
      <span>月龄：</span>
      <el-input
        size="small"
        style="width: 300px"
        v-model="info.月龄"
      ></el-input>
    </div>
    <div class="box">
      <span>随访日期：</span>
      <el-date-picker
        v-model="info.visitDate"
        align="right"
        type="date"
        placeholder="选择随访日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>体重/kg：</span>
      <el-input
        placeholder="请输入体重"
        v-model="info.weightValue"
        style="width: 300px"
        size="small"
      >
        <template slot="append">kg</template>
      </el-input>
      <el-radio-group v-model="info.weightState" style="margin-left: 10px">
        <el-radio label="上">上</el-radio>
        <el-radio label="中">中</el-radio>
        <el-radio label="下">下</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>身长/cm：</span>
      <el-input
        placeholder="请输入身长"
        v-model="info.heightValue"
        style="width: 300px"
        size="small"
      >
        <template slot="append">cm</template>
      </el-input>
      <el-radio-group v-model="info.heightState" style="margin-left: 10px">
        <el-radio label="上">上</el-radio>
        <el-radio label="中">中</el-radio>
        <el-radio label="下">下</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>体重/身高：</span>
      <el-radio-group v-model="info.体重">
        <el-radio label="-3SD">-3SD</el-radio>
        <el-radio label="-2SD">-2SD</el-radio>
        <el-radio label="-1SD">-1SD</el-radio>
        <el-radio label="+1SD">+1SD</el-radio>
        <el-radio label="+2SD">+2SD</el-radio>
        <el-radio label="+3SD">+3SD</el-radio>
      </el-radio-group>
      <br />
      <el-input
        placeholder="如为中位数则直接填写数值，2位小数"
        v-model="info.体重"
        style="width: 300px; margin-top: 10px"
        size="small"
      >
      </el-input>
      <br />
      <el-radio-group v-model="info.体重" style="margin-top: 10px">
        <el-radio label="上">上</el-radio>
        <el-radio label="中">中</el-radio>
        <el-radio label="下">下</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>体格发育评价：</span>
      <el-checkbox-group
        v-model="info.体格发育评价"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox label="正常" value="正常"></el-checkbox>
        <el-checkbox label="低体重" value="低体重"></el-checkbox>
        <el-checkbox label="消瘦" value="消瘦"></el-checkbox>
        <el-checkbox label="生长迟缓" value="生长迟缓"></el-checkbox>
        <el-checkbox label="超重" value="超重"></el-checkbox>
      </el-checkbox-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">体格检查</p>
    <div class="box">
      <span>视力：</span>
      <el-input
        placeholder="请输入左眼数值，如4.8"
        v-model="info.视力"
        style="width: 300px"
        size="small"
      >
        <template slot="prepend">左眼</template>
        <!-- <template slot="append">℃</template> -->
      </el-input>
      <el-input
        placeholder="请输入右眼数值，如4"
        v-model="info.视力"
        style="width: 300px; margin-left: 15px"
        size="small"
      >
        <template slot="prepend">右眼</template>
        <!-- <template slot="append">℃</template> -->
      </el-input>
    </div>
    <div class="box">
      <span>出牙/龋齿数（颗）：</span>
      <el-input
        placeholder="请输入出牙数"
        v-model="info.teeth"
        style="width: 300px"
        size="small"
      >
        <template slot="prepend">出牙数</template>
        <template slot="append">颗</template>
      </el-input>
      <el-input
        placeholder="请输入龋齿数"
        v-model="info.teethDecay"
        style="width: 300px; margin-left: 15px"
        size="small"
      >
        <template slot="prepend">龋齿数</template>
        <template slot="append">颗</template>
      </el-input>
    </div>
    <div class="box">
      <span>胸部：</span>
      <el-radio-group v-model="info.chest" style="margin-left: 10px">
        <el-radio label="未见异常">未见异常</el-radio>
        <el-radio label="异常">异常</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>腹部：</span>
      <el-radio-group v-model="info.abdominal" style="margin-left: 10px">
        <el-radio label="未见异常">未见异常</el-radio>
        <el-radio label="异常">异常</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>血红蛋白值：</span>
      <el-input
        placeholder="请输入"
        v-model="info.hemoglobin"
        style="width: 300px"
        size="small"
      >
        <!-- <template slot="prepend">出牙数</template> -->
        <template slot="append">g/L</template>
      </el-input>
    </div>
    <div class="box">
      <span>其他：</span>
      <el-input
        placeholder="请输入"
        v-model="info.其他"
        style="width: 300px"
        size="small"
      >
        <!-- <template slot="prepend">出牙数</template> -->
        <!-- <template slot="append">g/L</template> -->
      </el-input>
    </div>
    <div class="box">
      <span>发育评估：</span>
      <el-checkbox-group
        v-model="info.assessment"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox
          label="不能简单叙说事情经过"
          value="1"
        ></el-checkbox>
        <el-checkbox
          label="不知道自己的性别"
          value="2"
        ></el-checkbox>
        <el-checkbox
          label="不会用筷子吃饭"
          value="3"
        ></el-checkbox>
        <el-checkbox label="不会单脚跳" value="4"></el-checkbox>
      </el-checkbox-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">两次随访间患病情况</p>
    <div class="box">
      <span>两次随访间患病情况：</span>
      <el-checkbox-group
        v-model="info.twoItlState"
        style="width: 80%; display: inline-block;vertical-align: middle;"
      >
        <el-checkbox label="无" value="无"></el-checkbox>
        <br>
        <el-checkbox label="肺炎" value="肺炎"></el-checkbox>
        <el-input
        placeholder="请输入"
        v-model="info.twoItlPneumoniaNum"
        style="width: 200px;margin:0 10px;"
        size="small"
      >
        <!-- <template slot="prepend">出牙数</template> -->
        <template slot="append">次</template>
      </el-input>
      <el-checkbox label="腹泻" value="腹泻"></el-checkbox>
        <el-input
        placeholder="请输入"
        v-model="info.twoItlDiarrheaNum"
        style="width: 200px;margin:0 10px;"
        size="small"
      >
        <!-- <template slot="prepend">出牙数</template> -->
        <template slot="append">次</template>
      </el-input>
      <br>
      <el-checkbox label="外伤" value="外伤"></el-checkbox>
        <el-input
        placeholder="请输入"
        v-model="info.twoItlTraumaNum"
        style="width: 200px;margin:0 10px;"
        size="small"
      >
        <!-- <template slot="prepend">出牙数</template> -->
        <template slot="append">次</template>
      </el-input>
      <el-checkbox label="其他" value="其他"></el-checkbox>
        <el-input
        placeholder="请输入"
        v-model="info.twoItlOther"
        style="width: 200px;margin:0 10px;"
        size="small"
      >
        <!-- <template slot="prepend">出牙数</template> -->
        <template slot="append">次</template>
      </el-input>
      </el-checkbox-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">转诊建议</p>
    <div class="box">
      <span>转诊建议：</span>
      <el-radio-group v-model="info.referral" style="margin-left: 10px">
        <el-radio label="无" value="1">无</el-radio>
        <el-radio label="有" value="2">有</el-radio>
      </el-radio-group>
      <div v-if="info.转诊建议 == '2'">
        原因:
        <el-input
        placeholder="请输入"
        v-model="info.referralOther"
        style="width: 200px;"
        size="small"
      >
      </el-input>
      </div>
      <div v-if="info.转诊建议 == '2'">
        机构及科室:
        <el-input
        placeholder="请输入"
        v-model="info.referralDepartment"
        style="width: 200px;"
        size="small"
      >
      </el-input>
      </div>
    </div>
    <div class="box">
      <span>指导：</span>
      <el-checkbox-group
        v-model="info.visitGuidance"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox
          label="合理膳食"
          value="1"
        ></el-checkbox>
        <el-checkbox
          label="生长发育"
          value="2"
        ></el-checkbox>
        <el-checkbox
          label="疾病预防"
          value="3"
        ></el-checkbox>
        <el-checkbox label="预防意外伤害" value="4"></el-checkbox>
        <el-checkbox label="口腔保健" value="5"></el-checkbox>
        <el-checkbox label="其他" value="6"></el-checkbox>
        <el-input
        placeholder="请输入"
        v-model="info.visitGuidanceOther"
        style="width: 200px;margin-left: 10px;"
        size="small"
      >
      </el-input>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span>下次随访日期：</span>
      <el-date-picker
        v-model="info.nextDate"
        align="right"
        type="date"
        placeholder="选择下次随访日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>随访医生签名：</span>
      <el-select
        filterable
        placeholder="请选择随访医生"
        size="small"
        style="width: 200px"
        v-model="info.respDoctorId"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="box">
      <span>随访照片：</span>
      <el-button
        icon="el-icon-upload2"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >本地上传文件</el-button
      >
      <el-button
        icon="el-icon-picture-outline"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >加载手机图片</el-button
      >
      <p style="margin-top: 10px">
        扫描二维码，在手机端点击"上传"图片，在手机端上传后，点击上方"加载手机照片"按钮，即可同步到电脑端
      </p>
      <div>
        <img
          style="width: 100px"
          src="http://8.218.107.5:9992/media/base/zhengjian/qrcode/16863931874Q68253F.png"
          alt=""
        />
        <img
          style="width: 100px; margin-left: 20px"
          src="http://8.218.107.5:9992/media/base/zhengjian/qrcode/16863931874Q68253F.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      info: {
        体格发育评价: [],
        发育评估: [],
        两次随访间患病情况:[],
        指导:[]
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
    };
  },
};
</script>
    
    <style scoped lang="scss">
.etjkjc {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
}
</style>